<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<svg width="500px" height="500px" viewBox="0 0 500 500"> 
 			<circle cx="250" cy="250" r="10"></circle>
		    <rect x="0" y="0" width="100" height="100" fill="#feac5e"> 
		    	<!--<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="3" /> 
		    	<animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" />
		    	<animate attributeName="fill" to="red" dur="2s" repeatCount="indefinite" />-->
		    	
		    	<animateTransform 
		    		attributeName="transform" type="rotate" 
		    		begin="0s" dur="10s" from="0 50 50" 
		    		to="360 250 250" repeatCount="indefinite" />
		    	<animateTransform attributeName="transform" type="scale" 
		    		begin="0s" dur="3s" values="1,1; 2,2; 1,1" repeatCount="indefinite" />
		    </rect>
		    
		</svg>
		<hr />
		<svg width="51px" height="50px" viewBox="0 0 51 50">
			    <rect y="0" width="13" height="50" fill="#1fa2ff">
        <animate attributeName="height" values="50;10;50" begin="0s" dur="1s" repeatCount="indefinite" />
        <animate attributeName="y" values="0;20;0" begin="0s" dur="1s" repeatCount="indefinite" />
    </rect>

    <rect x="19" y="0" width="13" height="50" fill="#12d8fa">
        <animate attributeName="height" values="50;10;50" begin="0.2s" dur="1s" repeatCount="indefinite" />
        <animate attributeName="y" values="0;20;0" begin="0.2s" dur="1s" repeatCount="indefinite" />
    </rect>

    <rect x="38" y="0" width="13" height="50" fill="#06ffcb">
        <animate attributeName="height" values="50;10;50" begin="0.4s" dur="1s" repeatCount="indefinite" />
        <animate attributeName="y" values="0;20;0" begin="0.4s" dur="1s" repeatCount="indefinite" />
    </rect>
			</svg>
			<hr />
			<svg width="50" height="50" viewBox="0 0 50 50">
			    <path fill="#c779d0" d="M25,5A20.14,20.14,0,0,1,45,22.88a2.51,2.51,0,0,0,2.49,2.26h0A2.52,2.52,0,0,0,50,22.33a25.14,25.14,0,0,0-50,0,2.52,2.52,0,0,0,2.5,2.81h0A2.51,2.51,0,0,0,5,22.88,20.14,20.14,0,0,1,25,5Z">
			    	<animateTransform attributeName="transform" type="rotate" 
					from="0 25 25" to="360 25 25" dur="0.5s" repeatCount="indefinite" />
			    </path>
			</svg>
			<hr />
			<svg width="250" height="250" viewBox="0 0 50 50">
			    <polygon points="0 0, 50 25, 0 50" fill="#06ffcb">
			   		<animate attributeName="fill" values="red" begin="4s" dur="3s" repeatCount="1" />
			    </polygon>
			</svg>
	</body>
</html>
